<template>
  <div>
      <span>
      <button style="background: #5DC5E8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>&nbsp;进站人数<br>
      <button style="background: #FF9600">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>&nbsp;出站人数
  </span>
    <div id="columnChart" style="height: 700px ;width: 1500px"></div>

  </div>
</template>

<script>
  //当天各时刻出入站人数统计
    import * as echarts from 'echarts'
    import {findEveryTimeInOut} from "../../../http/request";
    export default {
        name: "dayInOutStationPassenger",
        data() {
            return {
              in_num: [],
                out_num:[],
                hour: []
            }
        },
        mounted(){
            this.columnChart();
            findEveryTimeInOut().then(res => {
                for(let r in res.data) {
                     console.log(res.data[r])
                     this.in_num.push(res.data[r].inNum)
                     this.out_num.push(res.data[r].outNum)
                     this.hour.push(res.data[r].hour)
                 }
                    console.log(this.in_num),
                    console.log(this.out_num),
                    console.log(this.hour)
                    this.columnChart()
            })
        },
        methods: {
            columnChart(){
                let columnChart = echarts.init(document.getElementById('columnChart'));
                columnChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'// 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            name: '时间/h',
                            type: 'category',
                            data: this.hour,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: '进站人数',
                            type: 'value',
                            height: '700px'
                        },
                        {
                            name: '',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '进站人数',
                            type: 'bar',
                            barWidth: '30%',
                            data: this.in_num,
                            itemStyle: {
                                color: '#5DC5E8'
                            }
                        },
                        {
                            name: '出站人数',
                            type: 'bar',
                            barWidth: '30%',
                            data: this.out_num,
                            itemStyle: {
                                color: '#FF9600'
                            }
                        }
                    ]
                });
            }
        }


    }



</script>

<style scoped>

</style>
